<template lang="">
	<view class="search-bar">
		<u-input
			placeholder="搜索"
			prefixIcon="search"
			aria-placeholder="请输入搜索关键字"
			border="none"
			v-model="searchValue"
			prefixIconStyle="font-size: 22px;color: #555555"
			@confirm="searchMall"
		>
			<template slot="suffix">
				<view
					@click="searchMall"
					class="searchBtn"
					text="搜索"
					type="primary"
				>
					<text>搜索</text>
				</view>
			</template>
		</u-input>
	</view>
</template>
<script>
export default {
  data() {
    return {
      searchValue: ''
    }
  },
  methods: {
    searchMall() {
      this.$emit('search', this.searchValue)
    }
  },
}
</script>
<style lang="scss">
	.search-bar{
		border-radius: 55rpx;
		border: 6rpx solid #3A62E9;
		height: 70rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding-left: 16rpx;
    .u-input{
      width: 98%;
      border-radius: 55rpx;
      margin-left: 5%;
    }

		.searchBtn {
			border-radius: 55rpx;
			background-color: #3A62E9;
			height: 70rpx;
			width: 130rpx;
			text-align: center;
			line-height: 70rpx;
			color: #ffffff;
			font-size: 28rpx;
			font-weight: 500;
			transform: translateX(2rpx);
		}
  }
</style>
